<template>
  <div class="rightmain_container">
    <div class="oprations_box">
      <div class="left_search">
        <el-icon :size="20" color="#444545">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
    </div>
    <!-- 详情表单信息 -->
    <div class="table_box">
      <el-table border :data="list" style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="秒杀时间段名称" />

        <el-table-column prop="startTime" label="每日开始时间">
          <template #default="{ row }">
            {{ formateTime(row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="每日结束时间">
          <template #default="{ row }">
            {{ formateTime(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="productCount" label="商品数量"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link
              @click="$router.push(`/sms/flashProductRelation/?flashPromotionId=${route.query.flashPromotionId}&flashPromotionSessionId=${row.id}`)">商品列表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Tickets } from "@element-plus/icons-vue";
// aip接口
import { Apisession } from "@/http//hjh.api.ts";
// 时间格式化
import { formateTime } from "@/utils/index";
// import useTable from "@/hooks/useTable";
// import { reactive, ref } from "vue";
import { useRoute } from "vue-router"
import { ref } from "vue"

const route = useRoute()
const list = ref([])

const ids = route.query.flashPromotionId
// console.log(ids)
// 获取数据进行重新赋值渲染



Apisession(ids).then(res => {
  if (res.code === 200) {
    list.value = res.data
  }
})




</script>

<style lang="less" scoped>
.rightmain_container {
  .left_search {
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      color: #303133;
      margin-left: 10px;
    }
  }

  .oprations_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
  }
}
</style>
